<template>
<div class="content-container">
    <div v-if="posts.length > 0" class="follow-list">
        <div v-for="(item, index) in posts" :key="item.id" class="follow-item" @click="goToDetail(item.id)">
            <div class="follow-user" @click.stop="goToUser(item.userId)">
                <img :src="item.userAvatar" :alt="item.userName" />
                <span>{{ item.userName }}</span>
            </div>
            <div class="follow-content">
                <div class="follow-text">{{ item.content }}</div>
                <div class="follow-images" v-if="item.images && item.images.length > 0">
                    <img v-for="(img, imgIndex) in item.images.slice(0, 3)" :key="imgIndex" :src="img"
                        :alt="item.title" />
                    <div class="image-count" v-if="item.images.length > 3">+{{ item.images.length - 3 }}</div>
                </div>
                <div class="follow-video" v-if="item.video">
                    <div class="video-cover">
                        <img :src="item.videoCover" :alt="item.title" />
                        <div class="video-play">
                            <van-icon name="play-circle-o" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="follow-actions">
                <div class="action-item">
                    <van-icon name="like-o" />
                    <span>{{ item.likes }}</span>
                </div>
                <div class="action-item">
                    <van-icon name="comment-o" />
                    <span>{{ item.comments }}</span>
                </div>
                <div class="action-item">
                    <van-icon name="star-o" />
                    <span>{{ item.favorites }}</span>
                </div>
            </div>
        </div>
    </div>
    <div v-else class="empty-follow">
        <van-empty description="暂无关注内容" />
        <van-button type="primary" size="small" @click="$router.push('/square')">去广场发现更多内容</van-button>
    </div>
</div>
</template>

<script>
export default {
    name: 'FollowContent',
    props: {
        posts: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        goToDetail(id) {
            this.$router.push(`/detail/${id}`)
        },
        goToUser(id, event) {
            this.$router.push(`/user/${id}`)
        },
        onScroll() {
            // 检测滚动到底部，触发加载更多
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            const clientHeight = document.documentElement.clientHeight
            const scrollHeight = document.documentElement.scrollHeight

            if (scrollTop + clientHeight >= scrollHeight - 50) {
                this.$emit('loadMore')
            }
        }
    },
    mounted() {
        window.addEventListener('scroll', this.onScroll)
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.onScroll)
    }
}
</script>

<style scoped>
.content-container {
    padding: 10px;
}

.follow-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.follow-item {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.follow-user {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.follow-user img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.follow-user span {
    font-weight: 500;
    font-size: 14px;
}

.follow-content {
    margin-bottom: 15px;
}

.follow-text {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.follow-images {
    display: flex;
    gap: 5px;
    position: relative;
}

.follow-images img {
    width: calc(33.33% - 4px);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
}

.image-count {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 12px;
}

.follow-video .video-cover {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.follow-video img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 48px;
    opacity: 0.8;
}

.follow-actions {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #f5f5f5;
    padding-top: 10px;
}

.action-item {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 14px;
}

.action-item .van-icon {
    margin-right: 5px;
    font-size: 16px;
}

.empty-follow {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
}

.empty-follow .van-button {
    margin-top: 15px;
}
</style>